<gm:page title="Note Tree" authenticate="false" onload="start()" css="resources/style.css" gadget="true">

  <div id="header" width="100%" align="center"><h1>Note Tree</h1></div>
  <div id="box"></div>
  
  <script>
start = function() {
	//document.forms.debug.debug.value = "";
	div = document.createElement('div');
	div.className = 'node';
	div.id = '1';
	document.getElementById('box').appendChild(div);
	sp = document.createElement("span");
	sp.style.cursor = "pointer";
	te = document.createTextNode("+ ");
	sp.appendChild(te);
	div.appendChild(sp);
	sp.onclick = function() { newnode('1'); }
	
	inputarea = document.createElement('input');
	inputarea.type = "text";
	inputarea.size = 6;
	inputarea.onkeyup = function() { incsize(this); }
	div.appendChild(inputarea);
	
	spclose = document.createElement('span');
	div.appendChild(spclose);
};

newnode = function(idofnode) {
	a = document.createElement('div');
	a.className = 'node';
	a.id = idofnode + "-" + (document.getElementById(idofnode).childNodes.length - 2);
	document.getElementById(idofnode).appendChild(a);
	sp = document.createElement("span");
	sp.style.cursor = "pointer";
	te = document.createTextNode("+ ");
	sp.appendChild(te);
	a.appendChild(sp);
	sp.onclick = function() { newnode(this.parentNode.id); }
	
	inputarea = document.createElement('input');
	inputarea.type = "text";
	inputarea.size = 6;
	inputarea.onkeyup = function() { incsize(this); }
	a.appendChild(inputarea);
	
	spclose = document.createElement('span');
	spclose.style.cursor = "pointer";
	te = document.createTextNode(" x");
	spclose.appendChild(te);
	a.appendChild(spclose);
	spclose.onclick = function() { delnode(this.parentNode); }
}

//window.onload = start;

function incsize(inputa) {
	if (inputa.value.length > (inputa.size - 1)) {
		inputa.size++;
	}
}

function delnode(arg) {
	arg.parentNode.removeChild(arg);
}

function debug () { 
	//for (var i=0; i<arguments.length; i++) 
	//document.forms.debug.debug.value += arguments[i] + "\n";  
}
  </script>

</gm:page>